<template>
	<view class="warp">
		<image :src="sysSetting.askPic" mode="aspectFill" class="img"></image>
		<view class="section-box">
			<uni-card spacing="5px" padding="5px" v-for="( item,index ) in dataList" :key="index">
				<uni-section :title="item.name" type="line" titleFontSize="12px" titleColor="#7c7c7c"></uni-section>
				<uni-list>
					<uni-list-item v-for="(d,i) in item.data" :key="i" :clickable="true" :title="d.title" :showArrow="true" @click="navigator(d)"></uni-list-item>
				</uni-list>
			</uni-card>
		</view>
		<!-- <view class="service-box">
			<uni-icons type="headphones" size="30" @click="onServer"></uni-icons>
		</view> -->
		<!-- <uni-popup ref="serverPopup" type="bottom">
			<image :src="sysSetting.serverPic" mode="aspectFit" class="sImg"></image>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		useUserStore
	} from "@/pinia/user.js"
	import { mapState } from "pinia"
	const db = uniCloud.database();
	
	export default {
		data() {
			return {
				dataList:[]
			}
		},
		computed:{
			...mapState(useUserStore,['sysSetting'])
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData(){
				let cat = db.collection("opendb-news-categories").orderBy('sort asc').getTemp()
				let art = db.collection("opendb-news-articles").where('article_status==1').field("category_id,title").getTemp()
				db.collection(cat,art).get().then(res=>{
					this.dataList = res.result.data.map(item=>{
						return {
							id:item._id._value,
							data:item._id["opendb-news-articles"],
							icon:item.icon,
							name:item.name
						}
					})
					console.log(this.dataList)
				})
			},
			onServer(){
				this.$refs.serverPopup.open()
				// console.log("onServer")
			},
			navigator(data){
				uni.navigateTo({
					url:`/pages/asked/detail?id=${data._id}&title=${data.title}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.warp{
		// position: relative;
		
	}
	.img{
		width: 100%;
		height: 150px;
	}
	.section-box{
		margin-top: -30px;
		margin-bottom: 10px;
		padding-bottom:10px;
		
	}
	.service-box{
		position: fixed;
		right: 10px;
		bottom: 60px;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background-color: #ffffff;
		border: 1px solid #f4f4f4;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sImg{
		margin: auto;
		width:100%;
	}
</style>
